<template>
  <div class="top">
         <nav1></nav1>
      <div class="mvtop">
   
      <span>区域</span>
      <ul>
          <li v-for="(item,index) in  trag" :key="index">
              <span  @click="send(index)" :class="{active:index==num}">{{item}}</span>
          </li>
          
      </ul>
  </div>
  </div>
</template>

<script>
import nav1 from '../../components/nav'
import {mapState} from 'vuex'
export default {
    components:{
        nav1
    },
    data(){
        return{
            num:0,
            num1:0,
            trag:['精选','内地','港台','欧美','韩国','日本']
        }
    },
    methods:{
        send(i){
            this.num=i
            this.$router.push({
                path:'/mvlist',
                query:{
                    sid:i
                }
            })
        },
       
    },
    created(){

    },

    
}
</script>

<style lang="scss" scoped>
.active{
background-color: #31c27c;
}
.mvtop{
    width: 1000px;
    margin: 140px auto;
    overflow: hidden;
    ul{
        display: flex;
        margin-top: -3px;
        li{
       
           span{
            display: block;
            margin-left: 30px;
            
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
           }
        }
    }
    span{
        float: left;
         margin-top: 20px;
    }
}
</style>